<template>
	<view>
  <block v-for="(item, index) in jobList" :key="item.id">
    <view class="job-item" @click="goDetail(item)">
      <!-- 左侧信息 -->
      <view class="left">
        <view class="top-line">
          <text class="position">{{ item.position }}</text>
          <text class="salary">{{ item.salary }}</text>
        </view>
        <view class="tags">
          <view v-for="tagItem in item.tag" :key="tagItem.id">
            <text class="tag">{{ tagItem.name }}</text>
          </view>
        </view>
      </view>

      <!-- 右侧信息 -->
      <view class="right">
        <text class="phone">{{ item.phone }}</text>
        <view class="bottom-line">
          <text class="distance">{{ item.distance }}km</text>
          <text class="credit">诚信值：{{ item.credit }}</text>
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <view class="divider"></view>
  </block>
  </view>
</template>

<script>
	import {
		gettasklist
	} from '@/api/api.js';
	import skuSelect from '@/mixins/skuSelect.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import {
		getCartCounts
	} from '@/api/order.js';
	import {
		goShopDetail
	} from '@/libs/order.js';
	import productWindow from '@/components/productWindow';
	export default {
		name: 'goodList',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			isSortType: {
				type: String | Number,
				default: 0
			}
		},
		components: {
			productWindow
		},
		mixins: [skuSelect],
		data() {
			return {
				jobList: []
			};
		},
		watch: {
			// 监听列表数据变化
			tempArr: {},
			// 监听标记，当标记发生变化，则执行下一个item排序
			mark() {
				const len = this.allList.length;
				if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
					this.waterFall();
				}
			},
			dataConfig() {
				console.log("AAAAAAAAAAAAAA");
				this.gettasklist();
			}
		},
		computed: {

			...mapState({
				cartNum: state => state.indexData.cartNum
			}),
			...mapGetters(['isLogin', 'uid', 'cartNum']),
			/*外层盒子样式*/

		},
		created() {

		},
		mounted() {
			console.log("AAAAAAAAAAAAAA");
			this.gettasklist();
		},
		methods: {
			gettasklist() {
				let data = {};
				data = {
					limit: 3
				}
				gettasklist(data).then(res => {
					this.jobList = res.data.jobList;
				})

			},
			goDetail(item) {

				uni.navigateTo({
					url: "/pages/task_detail/index?taskid=" + item.id
				});

			}
		}
	};
</script>


<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
	}

	.header {
		text-align: center;
		padding: 40rpx 0;

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.job-item {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;

		.left {
			flex: 1;

			.top-line {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.position {
					font-size: 32rpx;
					margin-right: 30rpx;
				}

				.salary {
					color: #e93b3b;
					font-size: 34rpx;
				}
			}

			.requirements {
				color: #666;
				font-size: 26rpx;
			}
		}

		.right {
			text-align: right;

			.phone {
				display: block;
				color: #007aff;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.distance {
				color: #999;
				font-size: 24rpx;
				margin-right: 20rpx;
			}

			.credit {
				color: #09bb07;
				font-size: 24rpx;
			}
		}
	}

	.divider {
		height: 1rpx;
		background-color: #eee;
		margin: 0 30rpx;
	}

	.scroll-view {
		height: calc(100vh - 240rpx);
	}

	.search {
		border: 1px solid #007aff;
		border-radius: 30rpx;
	}

	.search .area {
		margin: 20rpx
	}

	.search .input {
		margin: 18rpx;
	}

	.search .icon-ic_search {
		margin: 20rpx
	}

	.tags {
		display: flex;
		margin-top: 10rpx;
	}

	.tag {
		margin-right: 10rpx;
		background-color: #f5f5f5;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
</style>